import uniqueId from '@form-create/utils/lib/unique';
import {localeProps, makeOptionsRule, makeRequiredRule} from '@/plugins/form-create-designer/src/utils/index';

const label = '选择器';
const name = 'MdpSelect';

export default {
    icon: 'icon-select',
    label,
    name,
    inject:['designer'],
    rule({t}) {
        const opt = t('props.option');
        return {
            type: name,
            field: uniqueId(),
            title: t('components.MdpSelect.name'),
            info: '',
            effect: {
                fetch: ''
            },
            $required: false,
            props: {showStyle:'origin'},
            options: [1, 2].map(value => {
                return {
                    label: opt + value,
                    value,
                }
            })
        };
    },
    watch: {
        multiple({rule}) {
            rule.key = uniqueId();
        }
    },
    props(_, {t}) {
        return localeProps(t, name + '.props', [
            makeRequiredRule(),
            //makeOptionsRule(t, 'options'), 
            
            {
                type: 'input', 
                field: 'itemCode',
                title: '字典代码',  
                required: true,  
                children:[
                    {
                        type: 'MdpSelectMeta', 
                        field: 'itemCode', 
                        slot:'append', 
                        required: true, 
                        on:{
                            change2:(val)=>{ 
                                _.title = val.itemName
                                _.field = val.itemCode
                            }
                        }
                     }, 
                ]   
             }, 
            
             
            {
                type: 'radio',
                field: 'showStyle',
                title: '显示风格',
                value: 'origin',
                options: [{label: '原生', value: 'origin'}, {label: '标签', value: 'tag'},{label: '综合',value: 'x'}]
            },
            {
                type: 'radio',
                field: 'showType',
                title: '组件类型',
                value: 'select',
                options: [{label: '下拉列表', value: 'select'}, {label: '单选框', value: 'radio'},{label: '多选框',value: 'checkbox'}]
            }, 
            {type: 'switch', field: 'multiple', title: '是否多选'}, {
                type: 'switch',
                field: 'disabled',
                title: '是否禁用'
            }, {type: 'switch', field: 'clearable', title: '是否可以清空选项'}, {
                type: 'switch',
                field: 'collapseTags',
                title: '多选时是否将选中值按文字的形式展示'
            }, {type: 'inputNumber', field: 'multipleLimit', title: '多选时用户最多可以选择的项目数，为 0 则不限制', props: {min: 0}}, {
                type: 'input',
                field: 'autocomplete',
                title: 'autocomplete 属性'
            }, {type: 'input', field: 'placeholder', title: '占位符'}, {
                type: 'switch',
                field: 'filterable',
                title: '是否可搜索'
            }, {type: 'switch', field: 'allowCreate', title: '是否允许用户创建新条目'}, {
                type: 'input',
                field: 'noMatchText',
                title: '搜索条件无匹配时显示的文字'
            }, {
                type: 'switch',
                field: 'remote',
                title: '其中的选项是否从服务器远程加载'
            }, {
                type: 'Struct',
                field: 'remoteMethod',
                title: '自定义远程搜索方法'
            }, {type: 'input', field: 'noDataText', title: '选项为空时显示的文字'}, {
                type: 'switch',
                field: 'reserveKeyword',
                title: '多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词'
            }, {type: 'switch', field: 'defaultFirstOption', title: '在输入框按下回车，选择第一个匹配项'}, {
                type: 'switch',
                field: 'popperAppendToBody',
                title: '是否将弹出框插入至 body 元素',
                value: true
            }, {type: 'switch', field: 'automaticDropdown', title: '对于不可搜索的 Select，是否在输入框获得焦点后自动弹出选项菜单'}])
    }
};
